<template>
  <div class="pk-detail-con">
    <div class="progress">
      <div class="progress-bar" :style="percentage">
        <i class="lightning"></i>
      </div>
    </div>
    <span class="team-name team-l">买家</span>
    <span class="team-name team-r">卖家</span>
    <div>
      <span class="vote-nums vnums-l">
      <span style="color: dodgerblue;font-weight: bold">{{ user_vote }}</span>人支持买家
    </span>
      <span class="vote-nums vnums-r">
      <span style="color: red;font-weight: bold">{{ store_vote }}</span>人支持卖家
    </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "vote",
  props: ['user_vote', 'store_vote'],
  data() {
    return {
    }
  },
  computed:{
    percentage() {
      if (this.user_vote == 0 && this.store_vote == 0) return "width:50%"
      let res = Math.round(this.user_vote/(this.user_vote+this.store_vote) *100)
      return "width:"+res+"%"
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.pk-detail-con {
  margin: 0 auto;
  position: relative;
  width: 80%;
  height: 80px;
}

.progress {
  width: 100%;
  height: 38px;
  overflow: hidden;
  /*background-color: #db1d4e;*/
  background-color: red;
  border-radius: 19px;
}

.progress-bar {
  height: 38px;
  text-align: left;
  background-color: #4c3de0;
  -moz-transition: width .6s ease;
  -webkit-transition: width .6s ease;
  transition: width .6s ease
}

.progress, .progress-bar {
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
}

.lightning {
  width: 25px;
  height: 38px;
  float: right;
  margin-right: -12px;
  background: url("../../assets/img/闪电.png") no-repeat center;
  background-size: cover;
}

.team-name {
  position: absolute;
  top: 0;
  line-height: 38px;
  color: #f3eee1;
  letter-spacing: 1px;
  font-size: 14px;
}

.team-l {
  left: 23px;
}

.team-r {
  right: 23px;
}

.vote-nums {
  line-height: 2;
  color: #000000;
  font-size: 16px;
}

.vnums-l {
  float: left;
  margin-left: 23px;
}

.vnums-r {
  float: right;
  margin-right: 23px;
}
</style>
